<!-- 
  style样式绑定案例 - 进度条
-->
<script setup>
  import { ref, watch } from "vue";
  const i = ref(0)
  // watch(i, () => {
  //   console.log({width: `${i.value * 25}` + '%'})
  // })

</script>

<template>
  <div class="outer"> 
    <div class="inner" :style="{width: `${i * 25}` + '%'}">
      <span class="tips">{{ `${i * 25}` + '%' }}</span>
    </div>
  </div>
  <button @click="i = 1">25%</button>
  <button @click="i = 2">50%</button>
  <button @click="i = 3">75%</button>
  <button @click="i = 4">100%</button>
</template>

<style scoped>
  .outer {
    width: 470px;
    height: 50px;
    padding: 2px 4px;
    border-radius: 2em;
    background-color: #014612;
  }
  .inner {
    height: 100%;
    border-radius: 2em;
    background-color: #08d13b;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;
  }
</style>